<template>
	<div class="block">
		<div class="list">
			<div class="item" v-for="item in list" :key="item.name">
				<p>
					<span>{{ item.value }}</span>
					<span>{{ item.unit }}</span>
				</p>
				<p>{{ item.name }}</p>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { zcyhtj_check } from '@/service/village'

const list = ref([
	{
		name: '发现隐患数量',
		value: 0,
		res: 'yhcount',
		unit: '个'
	},
	{
		name: '隐患发现率',
		value: 0,
		res: 'yhfxl',
		unit: '%'
	},
	{
		name: '隐患整改数量',
		value: 0,
		res: 'zgcount',
		unit: '个'
	},
	{
		name: '隐患整改率',
		value: 0,
		res: 'yhzgl',
		unit: '%'
	},
])


const getData = async () => {
	const result = await zcyhtj_check()
	Object.keys(result?.data)?.forEach(key => {
		list.value?.map(item => {
			if (item.res === key) item.value = result?.data?.[key]
		})
	})
}


onMounted(() => {
	getData()
})
</script>

<style scoped lang="less">
.block {
	.list {
		margin: 24px 24px 0;
		display: flex;
		gap: 12px;
		padding-bottom: 24px;
		.item {
			background: #F6F6F6;
			flex: 1;
			height: 98px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			p {
				height: 40px;
				line-height: 40px;
				font-size: 24px;
				&:nth-of-type(1) {
					span {
						&:nth-of-type(1) {
							font-size: 34px;
							font-weight: 600;
							color: var(--van-primary-color);
							margin-right: 6px;
						}
					}
				}
				&:nth-of-type(2) {
					color: #B9B9B9;
				}
			}
		}
	}
}
:deep(.pie-chart) {
	height: 320px;
}
</style>
